<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<c:set var="context"
	value="${pageContext.request.servletContext.contextPath}" />
<script type="text/javascript">
	$(document).ready(function() {
		var table = $('#listStudent').DataTable({
			"bServerSide" : false,
			"sAjaxSource" : "listStudentJSON",
			"searching" : false,
			"info": false,
			"sDom" : 'tp',
			"aoColumns" : [ {
				"mData":   null,
                "mRender": function ( data, type, row ) {
                		return '<div align="center"><input type="checkbox" class="select_checkbox" ></div>';
                },
                "width": "1%",
                "bSortable": false
 			},  {
				"mData" : "email",
				"sTitle" : "Id",
				"visible": true,
				"width": "20%"
			},	{
				"mData" : "name",
				"width": "80%"

			}
			]
		});
		
		$('table tbody').on( 'click', 'tr', function () {
	        $(this).toggleClass('selected');
	        var checked = $(this).children().children().children(".select_checkbox");
	        try{
	        	checked.prop("checked", !checked.prop("checked"));
	        }catch(e){
	        	alert(e);
	        }
	    } );
		
		$('#delete').click( function () {
			try{
				var names = table.cells('.selected', 1).data();
				var listName = "";
				for(var i = 0; i < names.length; i++){
					names[i] = names[i] + ";"
					listName = listName + names[i];
				}
				alert(listName);
				$.ajax({
					   url: 'delete',
					   type: "POST",
					   contentType: 'application/json',
					   mimeType: 'application/json',
					   data: listName,
					   error:function(data,status,er) { 
						   alert("some errors occurred. Please try again later!")	;		
						   window.location.href = window.location.href;
					    },
					   dataType: 'text',
					   success: function(data) {
						   if(data == "success") {
							   alert("Delete success");

						   } else {
							   alert("some errors occurred. Please try again later!");
						   }
						   window.location.href = window.location.href;
					   },
					});
			}
			catch(ex){
				alert(ex);
			}
	    } );
	});
</script>
<!-- Template for all sub-pages -->
<div id="portal_main_content" align="left">
	<!-- Don't change this -->
	<div id="site_title">

		<!-- ************** -->
		<!-- Able to change -->
		<h2>Class Detail</h2>
	</div>
	<!-- Don't change this -->
	<div id="site_content">
		<div id="btn_control">
			<!-- ************** -->
			<!-- Able to change -->
			<a href="edit/${myClass.classId }" class="btn btn-primary btn-sm">Edit Class</a>
			<a href="addstudent/${myClass.classId }" class="btn btn-primary btn-sm">Add Student</a>
			<a id="delete" class="btn btn-primary btn-sm float_right">Remove</a>
		</div>
		<div id="table">

			<!-- ************** -->
			<!-- Able to change -->
			<b>Class Id: ${myClass.classId }</b> <br>
			<b>Class Name: ${myClass.className }</b> <br><br><br>
			
			List Student:
			<table id="listStudent" class="hover table table-striped table-bordered"
				cellspacing="0" style="width: 100%;">
				<thead>
					<tr>
						<th></th>
						<th>Email</th>
						<th>Student Name</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</div>